<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="../element/index.css">
  <!--在引用element的index.js之前引用vue-->
  <script src="../element/vue.js"></script>
  <script src="../element/index.js"></script>
</head>
<body>
<div id="app">
  <el-table :data="tableData" stripe>
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作" align="center">
      <!--
         slot-scope：作用域插槽，可以获取表格数据
         scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
       -->
      <template slot-scope="scope">
        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页条-->
  <el-pagination @current-change="handleCurrentChange"
                 :current-page="5"
                 :page-size="10"
                 layout="total, prev, pager, next, jumper"
                 :total="305">
  </el-pagination>
</div>
</body>
</html>
<script>
  new Vue({
    el: '#app',
    data: {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    },
    methods: {
      handleDelete: function (row) {
        alert(row.date);
      },
      handleUpdate: function (row) {
        alert(row.date);
      },
      // 当前页发生变化的时候，触发
      handleCurrentChange(page) {
        alert(page);
      }
    }
  });
</script>